<template>
	<view class="myVideo" :style="vstyle">
		<view class="video-box">
			<video id="myVideo" 
				:src='videoUrl' 
				objectFit="cover" 
				controls style="width:100%;height:100%;position: relative;"
				:show-center-play-btn="false"
				show-mute-btn="false" 
				auto-pause-if-navigate 
				:custom-cache="false" 
				:autoplay="play"
				:controls="false"
				:poster="poster"
				:direction="-90"
				:enable-progress-gesture="false"
				@timeupdate="onTimeUpdate"
				@ended="onVideoEnded"
				@click="outPlay"
				@loadedmetadata="intoVid"
				>
			</video>
			<view class="paly-land">
				<text class="iconfont" v-if="!isLandShow" @click="landPlay">全屏观看</text>
				<text class="iconfont" v-else @click="landPlay">退出全屏</text>
<!-- 				<text class="iconfont icon-quanping2" v-if="!isLandShow" @click="landPlay"></text>
				<text class="iconfont icon-quxiaoquanping1" v-else @click="landPlay"></text> -->
			</view>
			<view class="paly acea-row row-center-wrapper" v-if="isShow">
				<view v-if="!isPlay" class="play-start-box">
					<view class="paly-btn paly-start">
						<text class="iconfont icon-bofang-yuankuang" @click="toPlay"></text>
					</view>
				</view>
				<view class="paly-end" v-if="isPlay && isShow" @click="outPlay">
				<!-- <text class="iconfont icon-bofang"></text> -->
				</view>
			</view>
			<view class="progress acea-row row-center row-bottom">
				<view class="progress-status">
				  <view class="progress-inner" :style="{ width: `${loadingWidth}%` }">
					<view class="progress-mask"></view>
				  </view>
				  <view class="progress-hb" :style="{left:`${hbLeft}%`}" v-if="hbLeft > 0 && isHbShow && hbTime !== '' && !isReceiveHb && isfahb">
					  <view class="progress-hb-img" @click.native="showTips"></view>
					  <view class="progress-hb-tips" v-if="isTips">还有<text class="yellow">{{lqTime}}</text>才可以领哦</view>
				  </view>
				</view>
			</view>
			<view v-if="isOver" class="over-box acea-row row-column row-middle">
				<view class="bigsize font_bold size18 blod500 white">视频已播放完成</view>
				<view class="midsize font_bold blod500 white">学习结束，别忘了参加有奖答题领红包哦</view>
				<view class="replay white" @click="toPlay">
					<text class="iconfont icon-shuaxin size18"></text>
					<text class="">重新观看</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {Http_url} from "@/config/config.js"
	export default {
		name:"videoShow",
		props:{
			videoUrl:{
				type:String,
				default:''
			},
			poster:{
				type:String,
				default:''
			},
			play:{
				type:Boolean,
				default:false
			},
			isfahb:{
				type:Boolean,
				default:false
			},
			hbTime:{
				type:Number,
				default:0
			},
            //是否已领取红包 
            isReceiveHb: {
                type:Boolean,
                default:false
            },
			// 系统类型
            platform: {
                type:String,
                default:''
            }
		},
		data() {
			return {
				videoTimes:0,
				videoTime:0,//总时长
				loadingWidth:0,//进度条宽度
				hbLeft:0,//红包显示位置
				isTips:false,//是否显示提示
				isPlay:false,//是否播放
				videoContext:'',//视频对象
				currentTime:0,//当前播放时间
				isShow:true,
				hbTimes:0,//获取红包时间
				lqTime:'',//还有好久可领取红包
				isHbShow:false,//是否显示红包
				isOver:false,//是否显示解释语
				isLandShow:false,//是否全屏显示
				vWeidth:'',//视频宽度
				vHeight:'',//视频高度
				vstyle:{},//视频样式
			};
		},
		created() {
			this.isHbShow = this.isfahb
		},
		mounted() {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		watch:{
			play(newVal, oldVal){
				this.isPlay = newVal
				if(newVal){
					this.isShow = false
					this.currentTime ++
					this.toPlay()
				}else{
					this.isShow = true
				}
				return;
			}
		},
		methods:{
			showTips(){
				this.isTips = true
				setTimeout(()=>{
					this.isTips = false
				},3000)
			},
			onTimeUpdate(e){
				// console.log('e',e)
                this.$emit('timeupdate', e)
				const video = e.target;
				// const hbTimeC = this.formatHbTime()
				const hbTimeC = this.hbTime
				this.currentTime = video.currentTime;
				this.loadingWidth = parseInt(parseFloat(this.currentTime/this.videoTimes) * 100)
				this.lqTime = hbTimeC > 0 && this.currentTime < hbTimeC ? this.formatSeconds(hbTimeC*1-this.currentTime*1) : '00:00' 
				// console.log('hbTimeC',hbTimeC)
				// console.log('currentTime', parseInt(this.currentTime))
				this.$emit('changeDuration',parseInt(this.currentTime))
				if(
                    hbTimeC > 0 && hbTimeC === parseInt(this.currentTime) &&
                    !this.play &&
                     this.isHbShow && 
                     // 已领取过红包不弹出红包弹框
                     !this.isReceiveHb && 
                     this.isfahb
                 ){
					this.$emit('showHB',1)
					// this.outPlay()
				}
				//视频播放完毕后
				// console.log('videoTimes',this.videoTimes)
				// console.log('currentTime', parseInt(this.currentTime))
				
				if(parseInt(this.videoTimes) === parseInt(this.currentTime) && parseInt(this.currentTime) > 0){
					this.isOver = true
					this.loadingWidth = 0
					this.currentTime = 0
					// console.log('isOver',this.isOver)
					this.$emit('overplay',parseInt(this.videoTimes))
				}
			},
			onVideoEnded(){
				this.outPlay()
			},
			// 播放
			toPlay() {
				this.videoContext = uni.createVideoContext('myVideo')
				// console.log('11111')
				this.isOver = false
				this.isPlay = true;
				this.videoContext.play()
				this.isShow = true
				setTimeout(()=>{
					this.isShow = false
				},1000)
				// console.log('isOverto',this.isOver)
			},
			//暂停播放
			outPlay() {
				// this.videoContext = uni.createVideoContext('myVideo')
				this.videoContext.pause();
				this.videoContext.stop();
				this.videoContext.seek(); // 初始化播放进度
				this.videoContext=""
				this.isPlay = false;
				this.isShow = true
				this.$emit('changeDuration',this.currentTime)
			},
			// 横屏
			landPlay(){
				
				// this.videoContext = uni.createVideoContext('myVideo')
				if(!this.isLandShow){
					this.$emit('changQp',1)
					// this.videoContext.requestFullScreen()
					this.isLandShow=true
					const maskElement = document.createElement('div');
					maskElement.setAttribute('class','mask-element');
					maskElement.style.cssText = 'width:100%;height:100%;position:fixed;top:0;left:0;background:#000';
					const pageElement = document.querySelector('.page');
					if(pageElement){
						pageElement.appendChild(maskElement);
					}
				}else{
					this.$emit('changQp',2)
					// this.videoContext.exitFullScreen()
					this.isLandShow=false
					const maskElement = document.querySelector('.mask-element');
					if(maskElement){
						maskElement.remove();
					}
				}
			},
			// 初始化视频，获取总时长
			intoVid(e){
				let that=this
				// console.log('e',e)
				const hbTimeC = that.hbTime
				that.videoTimes = e.detail.duration
				that.videoTime = that.formatSeconds(that.videoTimes);
				that.hbLeft = hbTimeC > 0 ? parseInt(parseFloat(hbTimeC/that.videoTimes) * 100) : 0
				that.lqTime = hbTimeC > 0 ? that.formatSeconds(hbTimeC) : '00:00'
				that.isHbShow = hbTimeC > 0
			// 	console.log('hbLeft',that.hbLeft)
			// 	console.log('isHbShow',that.isHbShow)
			// 	console.log('lqTime',that.lqTime)
			// 	console.log('isReceiveHb',that.isReceiveHb)
			},
			// 秒转时间格式
			formatSeconds(value) {
				let theTime = parseInt(value);// 秒
				let middle= 0;// 分
				let times
				if(theTime > 60) {
					middle= parseInt(theTime/60);
					theTime = parseInt(theTime%60);	
					times = `${middle>9?middle:'0'+middle}:${theTime>9?theTime:'0'+theTime}`
				}else{
					times = `00:${theTime>9?theTime:'0'+theTime}`
				}
				return times;
			},
			// 时间格式转秒
			formatHbTime(){
				if(this.hbTimes === null || this.hbTimes === ''){
					return;
				}
				const hbTime = this.hbTimes.split(':')
				const minutes = hbTime[0].charAt(0) > 0 ? hbTime[0] : hbTime[0][1]
				const second =  hbTime[1].charAt(0) > 0 ? hbTime[1] : hbTime[1][1]
				const hbTimeC = minutes*60+second*1
				return hbTimeC
			}
		}
	}
</script>

<style lang="scss">
	@media (orientation: portrait) {
		.myVideo {
			width: 100%;
			height: 100%;
			flex-direction: row;
			background-color: aqua;
		}
	}

	@media (orientation: landscape) {
		.myVideo {
			width: 100%;
			height: 100%;
			flex-direction: column;
			background-color: red;
		}
		
	}
	.myVideo{
		// position: relative;
	}
	.video-box{
		position: relative;
		width: 100%;
		height: 100%;
		video{
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
	}
	.over-box{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		// background-color: #FFE9C3;
		background: rgba(0,0,0,0.5);
		z-index: 999;
		.bigsize{
			margin-top: 10%;
		}
		.midsize{
			margin: 30rpx 0;
		}
		.replay{
			border: #FFFFFF 2rpx solid;
			padding: 4rpx 20rpx;
			border-radius: 40rpx;
		// 	position: absolute;
		// 	right: 40rpx;
		// 	bottom: 20rpx;
			.iconfont{
				margin-right: 10rpx;
			}
		}
	}
	.paly{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		// background-color: rgba(0,0,0,0.5);
		z-index: 999;
		.paly-btn{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 56rpx;
			height: 56rpx;
			background-color: #FFFFFF;
			border-radius: 50%;
		}
		.play-start-box{
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.5);
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.iconfont{
			font-size: 68rpx;
		}
	// 	.iconfont::before{
	// 		position: absolute;
	// 		top: -8rpx;
	// 		left: -6rpx;
	// 	}
	}
	.paly-land{
		position: absolute;
		right: 20rpx;
		top: 30rpx;
		cursor: pointer;
		z-index: 9991;
		.iconfont{
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
	
	.baiz{
		.baiz-bg2{
			width: 96rpx;
			height: 104rpx;
			background-image: url('../static/images/baiz_bg2.png');
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			position: fixed;
			z-index: 1999;
			bottom: 20px;
			right: 20px;
		}
	}
	
	.progress {
	  position: absolute;
	  bottom: -60rpx;
	  left: 46%;
	  z-index: 999;
	  transform: translate(-50%, -50%);
	  overflow: hidden;
	  width: 100%;
	  height: 140rpx;
	  &-status {
	    // position: absolute;
	    // bottom: 10rpx;
	    // left: 0;
	    // width: calc(90% - 20rpx);
	    width: 90%;
	    height: 6rpx;
		margin-bottom: 30rpx;
		border-radius: rgba(0,0,0,0.5);
	    background-color: rgba(0,0,0,0.5);
	    border-radius: 12rpx;
	  }
	 
	  &-inner {
	    display: block;
	    width: 0;
	    height: 100%;
	    transition: left 1s linear;
	  }
	// process 动效 loading 2s 结束 可更改
	  &-mask {
	    width: 100%;
	    height: 100%;
	    border-radius: 10px;
	    // background: linear-gradient(to right, #00e0b5, #00c2c6);
		background: #FFFFFF;
	    animation: process 2s linear forwards;
	  }
	  &-text {
	    position: absolute;
	    left: 140px;
	    top: 330px;
	    font-size: 14px;
	    font-weight: normal;
	    line-height: 30px;
	    color: #3d3d3d;
	  }
	  &-hb {
		  position: absolute;
		  bottom: 10rpx;
		  width: 48rpx;
		  height: 60rpx;
		  z-index: 9991;
	  }
	  &-hb-img{
		  width: 48rpx;
		  height: 60rpx;
		  background-image: url('../static/images/hb.png');
		  background-repeat: no-repeat;
		  background-size: contain;
		  background-repeat: center;
		  /* 初始状态缩小元素 */
		  transform: scale(0.8);
		  /* 动画名称 */
		  animation: shake-it 1.5s infinite;
	  }
	  &-hb-tips {
		  position: absolute;
		  top: -42rpx;
		  left: -72rpx;
		  width: 200rpx;
		  font-size: 20rpx;
		  text-align: center;
		  padding: 4rpx 10rpx;
		  background-color: #FFFFFF;
		  border-radius: 20rpx;
	  }
	  &-hb-tips::before{
		  position: absolute;
		  bottom: -8rpx;
		  left: 40%;
		  content: '';
		  width: 0;
		  height: 0;
		  border-left: 20rpx solid transparent;
		  border-right: 20rpx solid transparent;
		  border-top: 10rpx solid #FFFFFF;
	  }
	}
	 
	@keyframes process {
	    0% {
	      width: 0;
	    }
	    100% {
	      width: 100%;
	    }
	  }
	@keyframes shake-it {
	    0% { transform: scale(0.8) rotate(0); }
	    25% { transform: scale(1.1) rotate(-10deg); }
	    50% { transform: scale(1.1) rotate(10deg); }
	    75% { transform: scale(1.1) rotate(-10deg); }
	    100% { transform: scale(1.1) rotate(10deg); }
	  }
	  @keyframes fadeIn {
	    to {
	      opacity: 1; /* 结束状态，透明度为1 */
	    }
	  }
	  @keyframes fadeout {
	    to {
	      opacity: 0; /* 结束状态，透明度为0 */
	    }
	  }
</style>